<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="container">
    <link-item
            v-bind:url="baidu"
    />
    <!--            将自定义控件的url数据绑定到数据baidu中-->
</div>

<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">

    const demoApp = {
        data() {
            return {
                baidu: 'http://www.baidu.com'
            }
        },
        mounted() {

        },
        methods: {}

    }

    // 支持链式写法,其他的方法都会返回app，但是mount方法不会。
    Vue.createApp(demoApp)
        .component('link-item', { //当定义组件名称为link时失效。
            props: ['url'],
            template: `<a v-bind:href="url">链接</a>` // 将组件的url绑定到href中。
        })
        .mount('#container')
</script>

</body>
</html>
